<template>
  <div class="tipMsg" v-show="isShowTipMsg" v-html="tipMsg"></div>
</template>

<script>
export default {
  name: "tipMsg",
  data(){
    return {
      isShowTipMsg: false,
      tipMsg: '',
    }
  },
  methods: {
    showTipMsg(tipMsg, time=1500){
      let timeId;
      this.isShowTipMsg = true;
      this.tipMsg = tipMsg

      clearTimeout(timeId);
      timeId = null;
      timeId = setTimeout(()=>{
        this.isShowTipMsg = false;

        clearTimeout(timeId)
        timeId = null;
      }, time);
    }
  },
}
</script>

<style scoped>
.tipMsg{
  position: fixed;
  left: 50%;
  top: 40%;
  max-width: 80%;
  padding: 3vw;
  border-radius: 5px;
  background-color: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px #999;
}
</style>
